<template>
  <ListViewTop :detail="state.playListDetail"></ListViewTop>
  <PlayList :detail="state.playListDetail"></PlayList>
</template>

<script>
import ListViewTop from "@/components/ListViewTop.vue"
import PlayList from "@/components/PlayList.vue"
import {getPlayListDetail} from "@/api/index"
import {onMounted,reactive,toRefs} from "vue";
import {useRoute} from "vue-router";
import {useStore } from "vuex"

export default {
  setup() {
    let route = useRoute()
    const store = useStore();
    let state = reactive({
      list: [],
      playListDetail:{
        creator:{},
        tracks:[]
      }
    })

    onMounted(async () => {
      let res = await getPlayListDetail(route.query.id)
      state.playListDetail = res.data.playlist
      store.commit("setPlayList",state.playListDetail)
      console.log(store.state.playList)
    })
    return {
      state
    }
  },
  components: {
    ListViewTop,PlayList
  }
}
</script>
